<template>


  <div>
    <h3>div默认是垂直方向排列</h3>
    <div style="background-color: #d0d0d0;height: 250px;">
      <div style="background-color: #42b983;height: 50px;width: 50px">1</div>
      <div style="background-color: yellow;height: 50px;width: 50px">2</div>
      <div style="background-color: wheat;height: 50px;width: 50px">3</div>
      <div style="background-color: violet;height: 50px;width: 50px">4</div>
    </div>

    <h3>div变成盒子模型,默认是水平方向排列</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex">
      <div style="background-color: #42b983;height: 50px;width: 50px">1</div>
      <div style="background-color: yellow;height: 50px;width: 50px">2</div>
      <div style="background-color: wheat;height: 50px;width: 50px">3</div>
      <div style="background-color: violet;height: 50px;width: 50px">4</div>
    </div>

    <h3>Flex-direction:row</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;flex-direction: row">
      <div style="background-color: #42b983;height: 50px;width: 50px">1</div>
      <div style="background-color: yellow;height: 50px;width: 50px">2</div>
      <div style="background-color: wheat;height: 50px;width: 50px">3</div>
      <div style="background-color: violet;height: 50px;width: 50px">4</div>
    </div>

    <h3>Flex-direction:row-reverse</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;flex-direction: row-reverse">
      <div style="background-color: #42b983;height: 50px;width: 50px">1</div>
      <div style="background-color: yellow;height: 50px;width: 50px">2</div>
      <div style="background-color: wheat;height: 50px;width: 50px">3</div>
      <div style="background-color: violet;height: 50px;width: 50px">4</div>
    </div>

    <h3> justify-content: 两端对齐</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;justify-content:flex-end;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>
    <h3> justify-content: 居中对齐</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;justify-content:center;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>
    <h3> justify-content: 左对齐</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;justify-content:flex-start;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>
    <h3> justify-content: 两端对齐</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;justify-content:space-between;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>
    <h3> justify-content: 两端对齐的区别</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;justify-content:space-around;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>
    <h3>div变成盒子模型，垂直方向排列 </h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;flex-direction: column;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>

    <h3>div变成盒子模型，垂直反方向排列 </h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;flex-direction: column-reverse;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>

    <h3>div变成盒子模型，交叉起点对齐 </h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;align-items: flex-start;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;">4</div>
    </div>

    <h3>div变成盒子模型,子元素平分父元素</h3>
    <div style="background-color: #d0d0d0;height: 250px;display: flex;">
      <div style="background-color: #D9006C;height: 50px;width: 50px;flex-grow: 1;">1</div>
      <div style="background-color: #FF8F59;height: 50px;width: 50px;flex-grow: 1;">2</div>
      <div style="background-color: rgb(82, 76, 76);height: 50px;width: 50px;flex-grow: 1;">3</div>
      <div style="background-color: #AD5A5A;height: 50px;width: 50px;flex-grow: 1;">4</div>
    </div>
  </div>
</template>

<script>
export default {
name: "box"
}
</script>

<style scoped>

</style>